<template>
    <div id="turn-hold">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
            @close="clean"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="80px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="转办部门" prop="l_DeptId">
                            <el-cascader 
                                v-model="ruleForm.l_DeptId"
                                :options="orgOption" 
                                :props="orgProps" 
                                @change="orgChange"
                                clearable 
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="转办人员" prop="l_UserId">
                            <el-select
                                v-model="ruleForm.l_UserId" 
                                filterable 
                                class="m-2" 
                                placeholder="选择转办人员" 
                                @change="useChange"
                                value-key="id"
                                popper-class="set-select"
                                :popper-append-to-body="false"
                            >
                                <el-option
                                    v-for="item in useOptions"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="cancelUseClick">取消</el-button>
                <el-button type="primary" :loading="repeatDis" :disabled="repeatDis" @click="submitForm(ruleFormRef)">提交</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue';
import { 
    FormInstance, 
    FormRules, 
    ElButton, 
    ElCol, 
    ElDialog,  
    ElForm, 
    ElFormItem, 
    ElOption, 
    ElRow, 
    ElSelect,
} from 'element-plus';
import { sysUserSelector } from '/@/api/centerControl/pubilc';
import { SMSHDRectifyRectificationShift , SMSHDRectifyReviewShift , SMSHDRectifyAcceptanceShift } from '/@/api/centerControl/sms';
/*** 定义接口基础数据类型 */
interface formType {
    repeatDis: Boolean,
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    id: Number, // 整改记录id
    l_DeptId: any, // 复查部门id
    l_UserId: any, // 复查人员id
}
export default defineComponent( {
    name: 'turn-hold',
    components: {},
    props: {
        currentStatus: {
            type: String,
            default: ''
        },
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: Object,
            default: {}
        },
        bascObj: {
            type: Object,
            default: {},
        },
        titleCon: {
            type: String,
            default: '',
        }
    },
    setup(props,ctx){
        const ruleFormRef = ref();
        const typeOption = ref();
        const orgOption = ref();
        const useOptions = ref();

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            repeatDis: false,
            ruleForm: {} as ruleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            l_DeptId: [
				{ required: true, message: '请选择转办部门', trigger: 'change' },
			],
            l_UserId: [
				{ required: true, message: '请选择转办人员', trigger: 'change' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelHoldClick')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    state.repeatDis = true;
                    let item: any = state.ruleForm;
                    let res: any;
                    try{
                        if(props.currentStatus === '整改'){
                            res = await SMSHDRectifyRectificationShift(item);
                        }else if(props.currentStatus === '复查'){
                            res = await SMSHDRectifyReviewShift(item);
                        }else{
                            res = await SMSHDRectifyAcceptanceShift(item);
                        }
                        if(res.success){
                            state.repeatDis = false;
                            ctx.emit('controlHoldClick');
                            ctx.emit('updateData');
                        }else{state.repeatDis = false;}
                    }catch(error){state.repeatDis = false;}
                }else{
                    console.log('error submit!')
					return false
                }
            })
        }

        /*** clean 清空数据 */
        const clean = () => {
            ruleFormRef.value.resetFields()
        }

        // 获取用户数据
        const useFun = async(id: number) => {
            let param: any = {};
            param.orgId = id;
            let res:any = await sysUserSelector(param)
            if(res.success){
                useOptions.value = res.data;
            }
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                state.repeatDis = false;
                if(Object.keys(props.repairInfo).length !== 0){
                    let getData = props.repairInfo;
                    if(getData.treeData !== '' && getData.bascData !== ''){
                        orgOption.value = JSON.parse(getData.treeData);
                        state.ruleForm.id = JSON.parse(getData.bascData).id;
                    }
                }
                state.ruleForm.l_DeptId = ''; // 复查部门id
                state.ruleForm.l_UserId = ''; // 复查人员id
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        /*** 复查部门改变事件 */
        const orgChange = (val: any) => {
            console.log(val)
            let len = val.length - 1;
            if(val && val.length !== 0){
                state.ruleForm.l_DeptId	 = val[len];
                state.ruleForm.l_UserId = ''; // 隐患排查人员id
                useFun(val[len]);
            }
        }

        /*** 复查人员改变事件 */
        const useChange = (val: any) => {
            
        }

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            clean,
            ruleFormRef,
            ...toRefs(state),
            isUseDialog,
            resultOption: [
                {id: 0, label: '已消除', value: 0},
                {id: 1, label: '未消除', value: 1}
            ],
            rules,
            typeOption,
            orgProps: { checkStrictly: true , label: 'title', value: 'id', children: 'children' },
            orgOption,
            orgChange,
            useOptions,
            useChange,
            componentKey: 1,
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-cascader){
    width: 100%;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%;
}
</style>